<template>
  <div class="delivery-setting">
    <a-card>
      <a-form-model :model="form">
        <a-form-model-item label="公里时间系数(分钟)">
          <a-input v-model="form.km_time" placeholder="请输入公里时间系数(分钟)" />
        </a-form-model-item>
        <a-form-model-item label="蛋糕个数限制">
          <a-input v-model="form.cake_limit" placeholder="请输入蛋糕个数限制" />
        </a-form-model-item>
        <a-form-model-item label="店铺经度">
          <a-input v-model="form.lon" placeholder="请输入店铺经度" />
        </a-form-model-item>
        <a-form-model-item label="店铺纬度">
          <a-input v-model="form.lat" placeholder="请输入店铺纬度" />
        </a-form-model-item>
        <a-form-model-item label="配送范围类型">
          <a-select v-model="form.type" @change="typeChange">
            <a-select-option :value="1">
              半径
            </a-select-option>
            <a-select-option :value="2">
              绘制
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="配送范围(半径)">
          <a-input v-model="form.radius" placeholder="请输入配送范围(半径)" />
        </a-form-model-item>
        <a-form-model-item>
          <a-button @click="onClickSave">保存</a-button>
        </a-form-model-item>
      </a-form-model>
      <div class="right-container">
        <div id="container">
          <a-list item-layout="horizontal" :data-source="data" v-show="data.length > 0">
            <a-list-item slot="renderItem" slot-scope="item, index" @click="onClickAddress(item)">
              <a-list-item-meta :key="index">
                <div slot="title">{{ item.title }}</div>
              </a-list-item-meta>
            </a-list-item>
          </a-list>
        </div>
        <a-input class="keyword" v-model="keyword" placeholder="请输入地址,按回车键搜索" @keyup.enter.native="onKeyword" />
        <div class="flex-button" v-if="form.type == 2">
          <a-button class="draw" @click="onClickDraw">
            绘制多边形
          </a-button>
          <a-button class="draw" @click="onClickStartEdit">
            开始编辑
          </a-button>
          <a-button class="draw" @click="onClickEndEdit">
            结束编辑
          </a-button>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
  import {
    findSetting,
    saveSetting
  } from '@/api/setting'

  export default {
    name: 'DeliverySetting',
    data() {
      return {
        form: {
          km_time: '',
          cake_limit: '',
          lon: '',
          lat: '',
          id: '',
          radius: '',
          path: [],
          type: 1
        },
        keyword: '',
        data: [],
        map: null,
        marker: null,
        mouseTool: null,
        polygon: null,
        polyEditor: null
      }
    },
    created() {
      this.findSetting()
    },
    mounted() {},
    methods: {
      typeChange(e) {
        this.Pixel()
      },
      onKeyword(e) {
        window.AMap.plugin('AMap.Autocomplete', () => {
          // 实例化Autocomplete
          var autoOptions = {
            // city 限定城市，默认全国
            city: '重庆'
          }
          var autoComplete = new window.AMap.Autocomplete(autoOptions)
          autoComplete.search(this.keyword, (status, result) => {
            console.log(result, status)
            if (status === 'complete' && result.info === 'OK') {
              this.data = result.tips.map(items => {
                const temp = {
                  title: items.name,
                  location: items.location
                }
                return temp
              })
              return
            }
            this.$message.error('地址搜索失败')
          })
        })
      },
      onClickAddress(record) {
        const {
          location: {
            lat,
            lng
          }
        } = record
        if (this.marker) {
          this.marker.setMap(null)
          this.marker = null
        }
        // this.map.setZoomAndCenter(17, [lng, lat])
        this.marker = new window.AMap.Marker({
          position: [lng, lat],
          offset: new window.AMap.Pixel(-13, -30)
        })
        this.marker.setMap(this.map)
        this.data = []
      },
      Pixel() {
        console.log("pixel")
        this.$nextTick(() => {
          const map = new window.AMap.Map('container', {
            resizeEnable: true,
            center: [this.form.lon, this.form.lat],
            zoom: 13
          })

          this.map = map

          this.mouseTool = new window.AMap.MouseTool(this.map)

          this.mouseTool.on('draw', event => {
            const {
              obj: {
                Ce
              }
            } = event

            const path = Ce.path.map(items => {
              return {
                lat: items.lat,
                lng: items.lng
              }
            })

            this.form.path = path

            this.mouseTool.close()

            this.$message.success('编辑成功, 请保存')
          })

          if (this.form.type === 2) {
            if (this.form.path) {
              const result = Array.from(Object.values(this.form.path));
              // console.log(result);
              const path = result.map(items => [items.lng, items.lat])
              console.log(path)
              this.polygon = new window.AMap.Polygon({
                path: path,
                strokeColor: '#F33',
                strokeWeight: 6,
                strokeOpacity: 0.2,
                fillColor: '#ee2200',
                fillOpacity: 0.4,
                // 线样式还支持 'dashed'
                strokeStyle: 'solid'
              })
              map.add(this.polygon)
            }
          } else {
            const circle = new window.AMap.Circle({
              center: new window.AMap.LngLat(this.form.lon, this.form.lat), // 圆心位置
              radius: this.form.radius, // 半径
              strokeColor: '#F33', // 线颜色
              strokeOpacity: 1, // 线透明度
              strokeWeight: 3, // 线粗细度
              fillColor: '#ee2200', // 填充颜色
              fillOpacity: 0.35 // 填充透明度
            })
            map.add([circle])
          }
        })
      },
      onClickDraw() {
        this.map.clearMap()
        this.mouseTool.polygon({
          strokeColor: '#F33',
          strokeWeight: 6,
          strokeOpacity: 0.2,
          fillColor: '#ee2200',
          fillOpacity: 0.4,
          // 线样式还支持 'dashed'
          strokeStyle: 'solid'
        })
      },
      onClickStartEdit() {
        console.log(this.map)
        console.log(this.polygon)
        this.polyEditor = new window.AMap.PolyEditor(this.map, this.polygon)
        if (this.polyEditor) {
          this.polyEditor.open()
        }
      },
      onClickEndEdit() {
        if (this.polyEditor) {
          this.polyEditor.on('end', event => {
            const {
              target: {
                Ce,
                De
              }
            } = event
            console.log(event)

            let paths = []
            if (Ce) {
              paths = Ce.path
            } else if (De) {
              paths = De.path
            }
            const path = paths.map(items => {
              return {
                lat: items.lat,
                lng: items.lng
              }
            })
            this.form.path = path
            this.polyEditor = null
            this.$message.success('编辑成功, 请保存')
          })
          this.polyEditor.close()
        }
      },
      async onClickSave() {
        const res = await saveSetting(this.form)

        const {
          message
        } = res

        this.$message.success(message)

        this.Pixel()
      },
      async findSetting() {
        const res = await findSetting()

        const {
          data
        } = res

        this.form = data

        this.Pixel()
      }
    }
  }
</script>

<style lang="less" scoped>
  .delivery-setting {
    ::v-deep .ant-input {
      width: 220px;
    }

    ::v-deep .ant-select {
      width: 220px;
    }

    ::v-deep .ant-card-body {
      display: flex;
      justify-content: space-between;
    }

    .ant-form {
      height: 800px;
    }

    .right-container {
      width: 80%;
      height: 800px;
      position: relative;
      // margin-left: 40px;
    }

    #container {
      width: 100%;
      height: 100%;
      // position: absolute;
      // right: 0;
      // top: 0;
      margin: 20px;
      padding: 10px;
    }

    .keyword {
      z-index: 11011;
      position: absolute;
      top: 20px;
      left: 20px;
      margin: 10px;
    }

    .flex-button {
      z-index: 11011;
      position: absolute;
      top: 20px;
      right: 0;

      .draw {
        margin: 10px;
      }
    }

    ::v-deep .ant-list {
      z-index: 11011;
      background: #fff;
      width: 400px;
      height: 500px;
      // margin: 10px;
      margin-top: 36px;
      padding: 10px;
      overflow: scroll;
    }
  }
</style>